<template>
  <div class="maxBox">
    <div class="topBox">
      <div class="smallTitle">已选列表</div>
      <div class="totalClass">成本小计：<span v-if="totals" style="color:red">￥</span><span class="numText">{{totals}}</span></div>
    </div>
    <el-table :data="list" style="width: 100%" highlight-current-row border height="56vh" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
      <el-table-column prop="materialName" label="材料名称" />
      <el-table-column prop="specs" label="规格"  />
      <el-table-column prop="materialDefaultAmout" label="单价">
        <template slot-scope="scope">
          <span v-if="scope.row.materialDefaultAmout">￥{{scope.row.materialDefaultAmout.toFixed(2)}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="unit" label="单位" width="50" />
      <el-table-column prop="unit" label="选择数量" width="160">
        <template slot-scope="{row}">
          <el-input-number v-model="row.materialNum" :min="0" size="mini"></el-input-number>
        </template>
      </el-table-column>
      <el-table-column prop="img" label="图片" width="90">
        <template slot-scope="{row}">
          <el-image style="width: 60px; height: 60px" :src="row.img" :preview-src-list="srcList" :z-index="9999"></el-image>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" fixed="right">
        <template slot-scope="{row}">
          <el-button type="danger" @click="delMater(row)" size="mini">移除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  computed: {
    totals() {
      let val = 0;
      if (this.list && this.list.length > 0) {
        this.list.forEach((item) => {
          if (!item.materialDefaultAmout) item.materialDefaultAmout = 0;
          val += item.materialDefaultAmout * item.materialNum;
        });
      }
      val = val.toFixed(2);
      this.$emit("totals", val);
      return val;
    },
  },
  data() {
    return {
      list: [],
      searchVal: "",
      total: 0,
      srcList: [],
    };
  },
  methods: {
    delMater(row) {
      if (!row.materialNum) {
        this.$error("请选择数量");
        return;
      }
      this.list.remove(row);
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.maxBox ::v-deep {
  th {
    background: #fafafa;
    color: #000;
  }
  .el-pagination {
    padding-top: 10px;
    text-align: right;
  }
  td {
    padding: 5px 0;
  }
  .totalClass {
    .numText {
      color: red;
      font-weight: bold;
      font-size: 18px;
    }
  }
  .topBox{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>